<template>
  <div class="document-parsing">
    <!-- <div class="header">{{ questionTitle ? questionTitle.length > 15 ? questionTitle.slice(0, 15) + '...' : questionTitle :
      '未命名会话'}}<span>{{ chatCreatedTime }}</span></div> -->
    <header-title class="header" :title="questionTitle" :dialog-id="dialogId"> <span class="chatCreatedTime">{{
        chatCreatedTime }}</span> </header-title>
    <div ref="containerRef" class="document-parsing-content">
      <div ref="leftContainerRef" class="left-container">
        <pdf-view ref="pdfViewRef" v-if="fileName.paperId" class="pdf-view" :pdf-url="fileName" :pargh-list="parghList"
          :languageCode="languageCode" :tran-status="tranStatus" :processStatus="processStatus"
          @changeTranStatus="changeTranStatus" ></pdf-view>
      </div>
      <div ref="dividerRef" class="divider"></div>
      <div ref="rightContainerRef" class="right-container">
        <ChatRoom :id="dialogId" :is-document=true :process-status="processStatus" :pdf-id="fileName.paperId">
        </ChatRoom>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, nextTick, onBeforeUnmount, onBeforeMount, provide, shallowRef, watch } from 'vue';
import pdfView from '@/components/pdfView.vue';
import type ChatRoom from '@/components/ChatRoom.vue';
import type { PdfFile } from '@/api/type';
import { apiGetParseProcess, apiParsingPaper } from '@/api/ai';
import { useRoute } from 'vue-router';
import { apiGetDialogDetail } from '@/api/dialog';
import { useMousePressed, useMouseInElement } from '@vueuse/core'
import HeaderTitle from '@/components/HeaderTitle.vue';
const fileUploadType = ref<string>('analyzing')// analyzing解析中 success 成功 fail 失败
const fileName = ref<PdfFile>({ url: '', name: '', paperId: '', size: '' })
const route = useRoute()
console.log('route', route.query)
import { cancelRequest } from "@/utils/requestUpload";
import { LANGUAGE_CODE } from '@/const';
const questionTitle = ref<string>('')
const pdfViewRef = ref(null)
const chatCreatedTime = ref<string>('')
const getQuestionTitle = (title: string, time: string) => {
  questionTitle.value = title
  chatCreatedTime.value = time
}
provide('getQuestionTitle', getQuestionTitle) // 用来从room中获取标题
const languageCode = ref(LANGUAGE_CODE.英文)
const parghList = ref<string[]>([])
const dialogId = ref<string>('')
const processStatus = ref<number>(3)
const leftContainerRef = shallowRef()
const dividerRef = shallowRef()
const containerRef = shallowRef()
const leftContainerMinWidth = ref(0)
const { pressed } = useMousePressed({ target: dividerRef, touch: false })
const { elementX } = useMouseInElement(containerRef)
watch(elementX, (newVal) => {
  if (!pressed.value || newVal < leftContainerMinWidth.value || newVal > containerRef.value.offsetWidth * 0.6 || newVal < containerRef.value.offsetWidth * 0.3) return
  leftContainerRef.value.style.flexBasis = `${Math.floor(newVal)}px`
  window.localStorage.setItem('leftContainerWidth', `${Math.floor(newVal)}px`)
})
const tranStatus = ref<number>(-1)
onBeforeMount(async () => {
  console.log('onBeforeMount1')
  await getDialogDetail()
})
const dealProcess = async () => {
  const { data } = await getParseProcessStatus()
  processStatus.value = data.process_status
  if (data.process_status >= 5) {
    parghList.value = data.pargh_list
    languageCode.value = data.languageCode || LANGUAGE_CODE.英文
    tranStatus.value = data.trans_status
    nextTick(() => {
      setTimeout(() => {
        if (tranStatus.value !== -1 && pdfViewRef.value) {
          console.log('parghList', tranStatus.value, pdfViewRef.value)
          pdfViewRef.value.startTranslate(tranStatus.value)
        }
      }, 3000);
    })
  } else {
    dealProcess()
  }
}
const getParseProcessStatus = async () => {
  const { data } = await apiGetParseProcess({ paperid: fileName.value.paperId })
  return data
}
onBeforeUnmount(() => {
  console.log('onBeforeUnmount', cancelRequest())
  cancelRequest()
})
onMounted(async () => {
  if (window.localStorage.getItem('leftContainerWidth')) {
    const width = window.localStorage.getItem('leftContainerWidth')
    leftContainerRef.value.style.flexBasis = width
  }
})


const changeTranStatus = (value: number) => {
  tranStatus.value = value
}
const getDialogDetail = async () => {
  dialogId.value = route.params.id as string
  const { data: { entity } } = await apiGetDialogDetail(dialogId.value)
  const dialogDetail = entity

  fileName.value.paperId = dialogDetail.pdfId
  if (dialogDetail.documentType === 1) {
    apiParsingPaper({ paperid: fileName.value.paperId as string })
  }
  fileName.value.url = dialogDetail.fileUrl
  fileName.value.name = dialogDetail.fileName
  fileName.value.size = dialogDetail.fileSize
  dialogId.value = route.params.id as string
  questionTitle.value = dialogDetail.dialogName
  console.log('fileName', fileName.value)
  if (fileName.value.url && fileName.value.paperId) {
    console.log('fileName', fileName.value)
    await dealProcess()
  }
}


</script>
<style lang="scss" scoped>
.document-parsing {
  height: 100vh;

  .header {
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-size: 16px;
    color: #0D1C2E;
    // border-bottom: 1px solid #E0E0E0;
    margin-bottom: 8px;
    position: relative;

    span {
      position: absolute;
      right: 24px;
      bottom: -16px;
      color: #5C5E61;
      font-size: 14px;
    }
  }

  .document-parsing-content {
    display: flex;
    // background: #fff;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    height: calc(100vh - 68px);
    padding: 0 20px;

    .left-container {
      width: 50%;
      border-right: 1px solid #DBDEE2;
      overflow-x: auto;
      // overflow-y: hidden;
      height: 100%;
      max-width: 65%;

      .loading-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 100%;
        justify-content: center;

        .desc {
          color: #16191D;
          font-size: 16px;
          margin-bottom: 24px;
        }

        .file-box {
          padding: 12px;
          background: #F5F6F8;
          width: 320px;

          img {
            width: 34px;
            height: 38px;
          }

          .file-info-box {
            width: 100%;
            padding-left: 12px;

            .file-name {
              font-size: 16px;
              color: #16191D;
            }

            .file-progress {
              color: #292929;
              font-size: 14px;
              line-height: 16px;
            }

            img {
              width: 14px;
              height: 14px;
            }
          }

          .flle-size {
            color: #9A9EAB;
            font-size: 12px;
          }
        }

        .progressStyle {
          width: 320px;
          line-height: 0;
        }
      }

      .fail-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 100%;
        justify-content: center;

        img {
          width: 40px;
          height: 40px;
        }

        .upload-btn {
          font-size: 16px;
          color: #3875F6;
          margin: 6px 0 6px;
        }

        .desc {
          color: #A3A4A5;
        }
      }

    }

    .right-container {
      height: 100%;
      // float: right;
      width: 50%;
      flex: 1;
    }

    .divider {
      flex: 0 0 4px;
      height: 100%;
      background-color: #f0f0f0;
      cursor: col-resize;

      &:active {
        cursor: default;
      }
    }
  }
}
</style>